<template>
  <div class="loginContainer">
      <el-button plain type="text" style="position:absolute;left:20px;top:20px;font-size:18px;"
          @click="back">返回</el-button>
      <div class="box">
        <div class="btnBox">按钮</div>
        <div style="margin-bottom:20px;">
          <button @click="change(36)">大</button>
          <button @click="change(24)">中</button>
          <button @click="change(14)">小</button>
        </div>
        <div>
          <button @click="changeColor('red')">红</button>
          <button @click="changeColor('blue')">蓝</button>
          <button @click="changeColor('yellow')">黄</button>
        </div>
      </div>
  </div>
</template>
<!-- 全局更改颜色字体大小 -->
<script lang="ts" setup>
import { ref } from 'vue'
import { useCssVar } from '@vueuse/core'
const back = () => {
  window.history.back()
}
const change = (str: number) => {
  const sizeValue = useCssVar('--size')
  sizeValue.value = `${str}px`
}
const changeColor = (str: string) => {
  const colorValue = useCssVar('--color')
  colorValue.value = str
}
</script>
<style lang="scss" scoped>
.loginContainer {
  height: 100vh;
  width: 100vw;
  padding: 60px;
  box-sizing: border-box;
  cursor: pointer;
}

.box {
  margin-top: 30px;
}
.btnBox{
  height: 50px;
    color: #fff;;
    text-align: center;
    line-height: 50px;
    font-size: var(--size);
    background:var(--color);
    margin-bottom:20px;
}
.itemBox {
  display: flex;
  flex-direction: row;
  margin: 20px auto;
}
</style>